import {Node} from '@antv/x6'
import {Graph} from '@antv/x6'
import svg from './svg/预测.svg'

Graph.registerNode(
  'Yuce',
  {
    inherit: 'rect', // 继承于 rect 节点
    width: 100,
    height: 40,
    label: '预测',
    markup: [
      {
        tagName: 'rect', // 标签名称
        selector: 'body', // 选择器
      },
      {
        tagName: 'image',
        selector: 'img',
      },
      {
        tagName: 'text',
        selector: 'label',
      },
    ],
    attrs: {
      body: {
        stroke: '#8f8f8f',
        strokeWidth: 1,
        fill: '#fff',
        rx: 6,
        ry: 6,
      },
      img: {
        'xlink:href':svg,
        width: 16,
        height: 16,
        x: 12,
        y: 12,
      },
      // label:{
      //   text:'预测',
      //   fill: "#333", //label颜色
      //   fontSize: 13,  //字体大小
      // }
    },
    ports: {
      groups: {
        top: {
          position: 'top',
          attrs: {
            circle: {
              magnet: true,
              stroke: '#8f8f8f',
              r: 5,
              visibility:'hidden',
            },
          },
        },
        bottom: {
          position: 'bottom',
          attrs: {
            circle: {
              magnet: true,
              stroke: '#8f8f8f',
              r: 5,
              visibility:'hidden',
            },
          },
        },
        left: {
          position: 'left',
          attrs: {
            circle: {
              magnet: true,
              stroke: '#8f8f8f',
              r: 5,
              visibility:'hidden',
            },
          },
        },
        right: {
          position: 'right',
          attrs: {
            circle: {
              magnet: true,
              stroke: '#8f8f8f',
              r: 5,
              visibility:'hidden',
            },
          },
        },
      },
    },
    paramList:''
  },
  true,
)




/**数据库节点 */
export const Yuce: Node.Metadata = {
  shape: 'Yuce',   //对应上面注册的 name
  attrs: {
    body: {
      refPoints: '10,0 40,0 30,20 0,20'
    },

  },
  ports: {
    items: [
      {
        id: 'port_1',
        group: 'top',
      },
      {
        id: 'port_2',
        group: 'right',
      },
      {
        id: 'port_3',
        group: 'bottom',
      },
      {
        id: 'port_4',
        group: 'left',
      },
    ],
  },
}
